<template>
    <div class="default-content-background page-task-list">
      <qtable
        :querys="querys"
        :columns = "columns"
        dataApi="/list"
        ref = 'pcOrderTable'
        >
      </qtable>
      <qmodal
        type="tip"
        :show="isShowTaskDetailModal"
        width="340">
        <div slot="head">
          <span style="font-size: 16px;color: #2B2C2F">任务详情</span>
          <img style="width: 20px;height: 20px;float: right;cursor: pointer" src="../../assets/close.png" @click="closeDialog('isShowTaskDetailModal')"  />
        </div>
        <div class="task-detail-modal" slot="tip">
          <Row>
            <Col span="9">
              <div class="color-a8a8a8">任务状态</div>
            </Col>
            <Col span="15">
              {{translateStatus(currentTaskDetailData.status)}}
            </Col>
          </Row>
          <Row v-if="currentTaskDetailData.variety && currentTaskDetailData.variety.indexOf('流量')> -1">
            <Col span="9">
              <div class="color-a8a8a8">订单完成进度</div>
            </Col>
            <Col span="15">
              {{currentTaskDetailData.good_attention_finished}}&nbsp;/&nbsp;{{currentTaskDetailData.good_attention}}
            </Col>
          </Row>
          <div v-else>
            <Row>
              <Col span="9">
                <div class="color-a8a8a8">商品关注数</div>
              </Col>
              <Col span="15">
                {{currentTaskDetailData.good_attention_finished}}&nbsp;/&nbsp;{{currentTaskDetailData.good_attention}}
              </Col>
            </Row>
            <Row>
              <Col span="9">
                <div class="color-a8a8a8">店铺关注数</div>
              </Col>
              <Col span="15">
                {{currentTaskDetailData.shop_attention_finished}}&nbsp;/&nbsp;{{currentTaskDetailData.shop_attention}}
              </Col>
            </Row>
            <Row>
              <Col span="9">
                <div class="color-a8a8a8">加购物车数</div>
              </Col>
              <Col span="15">
                {{currentTaskDetailData.cart_attention_finished}}&nbsp;/&nbsp;{{currentTaskDetailData.cart_attention}}
              </Col>
            </Row>
          </div>
          <Row>
            <Col span="9">
              <div class="color-a8a8a8">订单总京币</div>
            </Col>
            <Col span="15">
              {{currentTaskDetailData.bean_count/100}}京币
            </Col>
          </Row>
          <Row>
            <Col span="9">
              <div class="color-a8a8a8">已消耗京币</div>
            </Col>
            <Col span="15">
              {{currentTaskDetailData.consume_bean_count/100}}京币
            </Col>
          </Row>
          <Row>
            <Col span="9">
              <div class="color-a8a8a8">账户返还京币</div>
            </Col>
            <Col span="15">
              {{currentTaskDetailData.bean_count/100 - currentTaskDetailData.consume_bean_count/100}}京币
            </Col>
          </Row>
        </div>
      </qmodal>
    </div>
</template>

<script>
import qmodal from "../../components/qModal.vue";
import qtable from "../../components/qTable.vue";
export default {
  name: "page-task-list",
  data() {
    return {
      isShowTaskDetailModal: false,
      currentTaskDetailData: {},
      columns: [
        {
          title: "任务编号",
          align: "center",
          key: "order_number"
        },
        {
          title: "开始时间",
          align: "center",
          key: "begin_time"
        },
        {
          title: "结束时间",
          align: "center",
          key: "end_time"
        },
        {
          title: "用户手机号码",
          align: "center",
          key: "phone_number"
        },
        {
          title: "任务总京币",
          width: 140,
          align: "center",
          key: "bean_count",
          render: (h, params) => {
            let renderText = `${params.row.bean_count / 100}`;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "任务类型",
          align: "center",
          key: "variety"
        },
        {
          title: "状态",
          align: "center",
          key: "orderStatus",
          render: (h, params) => {
            return h("div", [
              h("span", this.translateStatus(params.row.status))
            ]);
          }
        },
        {
          title: "进度",
          align: "center",
          key: "progress",
          render: (h, params) => {
            let status = params.row.status;
            let progress = 0;
            let totalOrderCount = 0;
            let finishedOrderCount = 0;
            function add(sum, num) {
              return parseInt(num) ? (sum += num) : sum;
            }
            this.currentRowInfo = params;

            totalOrderCount = add(totalOrderCount, params.row.cart_attention);
            totalOrderCount = add(totalOrderCount, params.row.good_attention);
            totalOrderCount = add(totalOrderCount, params.row.shop_attention);
            finishedOrderCount = add(
              finishedOrderCount,
              params.row.cart_attention_finished
            );
            finishedOrderCount = add(
              finishedOrderCount,
              params.row.good_attention_finished
            );
            finishedOrderCount = add(
              finishedOrderCount,
              params.row.shop_attention_finished
            );
            return h("div", [
              h("span", finishedOrderCount + " / " + totalOrderCount)
            ]);
          }
        },
        {
          title: "操作",
          key: "customOptions",
          width: 100,
          align: "center",
          render: (h, params) => {
            let vm = this;
            let options = {
              checkDetail: h(
                "a",
                {
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      // console.info("row", params.row);
                      vm.isShowTaskDetailModal = true;
                      vm.currentTaskDetailData = params.row;
                    }
                  }
                },
                "查看详情"
              )
            };
            return h("div", [options.checkDetail]);
          }
        }
      ],
      querys: {
        queryTips: ["用户手机号", "任务类型", "状态"],
        queryTypes: ["input", "select", "select"],
        queryLists: [
          null,
          [
            {
              value: "AppOrder",
              label: "手机APP关注订单"
            },
            {
              value: "PcOrder",
              label: "PC端关注订单"
            },
            {
              value: "AppPopOrder",
              label: "手机人气流量订单"
            },
            {
              value: "PcPopOrder",
              label: "PC端人气流量订单"
            }
          ],
          [
            {
              value: "NOT_BEGINING",
              label: "未开始"
            },
            {
              value: "BEGINING",
              label: "进行中"
            },
            {
              value: "FINISHED",
              label: "已完成"
            },
            {
              value: "TERMINATED_MANUAL",
              label: "手动中止"
            },
            {
              value: "TERMINATED_NOT_FOUND",
              label: "订单未找到"
            },
            {
              value: "TERMINATED_SOLD_OUT",
              label: "商品已下架"
            },
            {
              value: "TERMINATED_OVER",
              label: "异常"
            },
          ]
        ],
        queryParamNames: ["phoneNumber",'variety', "status"]
      }
    };
  },
  filters: {},
  methods: {
    closeDialog(name) {
      this[name] = false;
    },
    translateStatus(status) {
      switch (status) {
        case "NOT_BEGINING":
          return "未开始";
          break;
        case "BEGINING":
          return "进行中";
          break;
        case "FINISHED":
          return "已完成";
          break;
        case "TERMINATED_MANUAL":
          return "手动中止";
          break;
        case "TERMINATED_NOT_FOUND":
          return "订单未找到";
          break;
        case "TERMINATED_SOLD_OUT":
          return "商品已下架";
          break;
        case "TERMINATED_OVER":
          return "异常";
          break;
        default:
          break;
      }
    }
  },
  components: {
    qmodal,
    qtable
  },
  mounted: function() {}
};
</script>

<style lang="less">
.page-task-list {
  padding: 10px;
  .ivu-table-row a {
    color: #15a089;
    transition: opacity 0.2s;
  }
  .ivu-table-row a:hover {
    opacity: 0.7;
  }
}
.task-detail-modal {
  font-size: 14px;
  line-height: 24px;
  .color-a8a8a8 {
    color: #a8a8a8;
  }
}
</style>
